<template>
  <div class="cartWrap">
    <div class="controls">
      <input autocomplete="off" class="itxt" v-model="skuNum">
      <a class="plus" @click="skuNum++">+</a>
      <a class="mins" @click="skuNum--">-</a>
    </div>
    <div class="add">
      <a @click="$emit('add',skuNum)">加入购物车</a>
    </div>
  </div>
</template>
<script setup lang="ts">
import {ref, watch} from "vue";

let skuNum = ref(1);
watch(skuNum, (newValue) => {
  newValue *= 1;
  if (isNaN(newValue) || newValue < 1) {
    newValue = 1;
  } else {
    newValue = parseInt(newValue as any);
  }
  skuNum.value = newValue;

})
</script>
<style scoped lang="less">
.cartWrap {
  .controls {
    width: 48px;
    position: relative;
    float: left;
    margin-right: 15px;

    .itxt {
      width: 38px;
      height: 37px;
      border: 1px solid #ddd;
      color: #555;
      float: left;
      border-right: 0;
      text-align: center;
    }

    .plus,
    .mins {
      width: 15px;
      text-align: center;
      height: 17px;
      line-height: 17px;
      background: #f1f1f1;
      color: #666;
      position: absolute;
      right: -8px;
      border: 1px solid #ccc;
    }

    .mins {
      right: -8px;
      top: 19px;
      border-top: 0;
    }

    .plus {
      right: -8px;
    }
  }

  .add {
    float: left;

    a {
      background-color: #e1251b;
      padding: 0 25px;
      font-size: 16px;
      color: #fff;
      height: 36px;
      line-height: 36px;
      display: block;
    }
  }
}
</style>
